import React, { useEffect, useState } from "react";
import "./App.css";
import { Layout } from "antd";
import axios from "axios";
const { Header, Content, Sider } = Layout;
function App() {
  const [list, setList] = useState<any[]>([]);
  useEffect(() => {
    axios.get("/api/list").then(resp => {
      setList(resp.data.list);
    });
  }, []);
  return (
    <Layout>
      <Header style={{ background: "#fff", color: "#000" ,width:"100%",display:"flex",justifyContent:"space-around"}}>
        <ul >
          {list &&
            list.map(v => {
              return (
                <li style={{  listStyle: "none" }} key={v.id}>
                  {v.title}
                </li>
              );
            })}
        </ul>
      </Header>
      <Layout style={{ height: "calc(100vh - 64px)" }}>
        <Sider theme="light">left sidebar</Sider>
        <Content>main content</Content>
      </Layout>
    </Layout>
  );
}

export default App;
